<html>
  <head>
    <title>Prime Factor Visualizer</title>
    <meta content="">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-1.5.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
    <script src="js/model.js"></script>
    <script>
    /* model element types: (current prime = y axis)
 * 0=Non-eliminated by current prime, and not prime
 * 1=Eliminated (uniquely) by current prime 
 * 2=Eliminated by current prime, but already eliminated by smaller prime
 * 3=Prime, but not equal to current prime
 * 4=Prime, equal to current prime
 */
    var tColors=['#FFFFFF','#DD0000','#FFCCCC','#EEEEEE','#000000'];
    var c,cx,uw,uh,rX,rY,dBuffer,dCx;
    var dorender=0;
    $(document).ready(function() {
     c=document.getElementById("display");
     cx=c.getContext("2d");
     rX=0;
     rY=0;
     setInterval("document.getElementById('memDisp').innerHTML=primes.length+' primes in memory.';",250);
 
    setTimeout("render();",10);
});
var rY_calc=new Array();
var rX_calc=new Array();
    function render() {
      if (c.width != window.innerWidth - 80) {c.width = window.innerWidth - 80; dorender=0;}
      if (c.height != window.innerHeight - 90) {c.height = window.innerHeight - 90; dorender=0;}

    if (dorender == 0) {rX=0;rY=0;dorender=1;
         uw=c.width/numCount;
     uh=c.height/primeCount;
                        for (var i=0;i<numCount;i++){
                        rX_calc[i]=i*uw;
                        }
                        for (var i=0;i<primeCount;i++){
                        rY_calc[i]=i*uh;
                        }
                        uw=Math.ceil(uw);
                        uh=Math.ceil(uh);
    }
    if (dorender == 1)
    for (var i=0;i<500;i++){
      cx.fillStyle=tColors[model[rX][rY]];
      cx.fillRect(rX_calc[rX],rY_calc[rY],uw,uh);
      rX++;
      if (rX>=numCount){rY++;rX=0;}
      if (rY>=primeCount){rY=0;dorender=10;}
      }
      
    setTimeout("render();",dorender*20);
    }
    </script>
  </head>
  <body>
  
  <canvas class="theGrid" id="display" width="1200" height="500"></canvas>
  
    <small id="memDisp">
  0 primes in memory.
  </small>

  </body>
  
</html>